'use client'

import { useState } from 'react'
import { 
  Box, 
  useColorModeValue,
  useDisclosure,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  FormControl,
  FormLabel,
  Input
} from '@chakra-ui/react'
import { NewProjectButton } from './NewProjectButton'
import { CollapsibleSection } from './CollapsibleSection'
import { ProjectList } from './ProjectList'
import { ChapterList } from './ChapterList'
import { CharacterList } from './CharacterList'
import { useSidebarData } from '@/hooks/useSidebarData'

export const ProjectSidebar = () => {
  // 状态
  const { 
    projects, 
    activeProjectId, 
    activeChapterId,
    activeCharacterId,
    selectProject,
    selectChapter,
    selectCharacter,
    getProjectChapters,
    getProjectCharacters
  } = useSidebarData()
  
  // 背景颜色
  const bgColor = useColorModeValue('gray.50', 'gray.800')
  
  // 新建项目对话框
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [newProjectName, setNewProjectName] = useState('')
  
  // 当前项目的章节和角色
  const currentProjectChapters = activeProjectId 
    ? getProjectChapters(activeProjectId) 
    : []
  
  const currentProjectCharacters = activeProjectId 
    ? getProjectCharacters(activeProjectId) 
    : []
  
  // 处理新建项目
  const handleCreateProject = () => {
    // 实际项目中，这里会调用API创建项目
    console.log('Creating new project:', newProjectName)
    setNewProjectName('')
    onClose()
  }
  
  return (
    <Box 
      h="100%" 
      bg={bgColor} 
      className="sidebar-container"
      borderRight="1px" 
      borderColor={useColorModeValue('gray.200', 'gray.700')}
    >
      {/* 新建项目按钮 */}
      <NewProjectButton onClick={onOpen} />
      
      {/* 项目列表 */}
      <CollapsibleSection title="我的项目">
        <ProjectList 
          projects={projects} 
          activeProjectId={activeProjectId}
          onSelectProject={selectProject}
        />
      </CollapsibleSection>
      
      {/* 章节列表 */}
      <CollapsibleSection title="章节">
        <ChapterList 
          chapters={currentProjectChapters} 
          activeChapterId={activeChapterId}
          onSelectChapter={selectChapter}
        />
      </CollapsibleSection>
      
      {/* 角色列表 */}
      <CollapsibleSection title="角色">
        <CharacterList 
          characters={currentProjectCharacters} 
          activeCharacterId={activeCharacterId}
          onSelectCharacter={selectCharacter}
        />
      </CollapsibleSection>
      
      {/* 新建项目对话框 */}
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>创建新项目</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <FormControl>
              <FormLabel>项目名称</FormLabel>
              <Input 
                value={newProjectName} 
                onChange={(e) => setNewProjectName(e.target.value)} 
                placeholder="输入项目名称" 
              />
            </FormControl>
          </ModalBody>
          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={onClose}>
              取消
            </Button>
            <Button 
              colorScheme="red" 
              onClick={handleCreateProject}
              isDisabled={!newProjectName.trim()}
            >
              创建
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  )
} 